<template>
  <div class="recommend" ref="recommend">
    <my-scroll ref="scroll" class="recommend-content" :data="discList">
      <div>
    	  <div class="slider-wrapper" v-if="recommends.length">    <!-- 关键，当recommends取到值以后再渲染这部分的dom -->
    	  	<my-slider>
    	  		<div v-for="(item,index) in recommends" :key="index">     <!-- recommends是通过promise异步加载得到的。dom生成会有延时 -->
    	  			<a :href="item.linkUrl">
    	  				<img class="needsclick" :src="item.picUrl" alt="img" @load="loadImage">         <!-- fastclick组件的一个小功能，有className=needsclick的元素不会去阻止其默认点击事件 -->
    	  			</a>
    	  		</div>
    	  	</my-slider>
    	  </div>
    	  <div class="recommend-list">
    	  	<h1 class="list-title">热门歌单推荐</h1>
    	  	<ul>
            <li v-for="(item,index) in discList" :key="index" class="item" @click="selectItem(item)">
              <div class="icon">
                <img width="60" height="60" v-lazy="item.imgurl || item.picUrl"></img>
              </div>
              <div class="text">
                <h2 class="name" v-html="item.creator.name || item.songListAuthor"></h2>                  <!-- 此处item.creator.name数据有字符，需要使用v-html做转义 -->
                <p class="desc" v-html="item.dissname || item.songListDesc"></p>
              </div>
            </li>  
          </ul>
    	  </div>
      </div>
      <div class="loading-container" v-show="!discList.length">        <!-- 当discList的长度大于0 的时候 -->
        <my-loading></my-loading>
      </div>
    </my-scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import Slider from 'base/slider/slider'
  import {getRecommend, getDiscList, getDataList} from 'api/recommend'
  import {ERR_OK} from 'api/config'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import {playlistMixin} from 'common/js/mixin'
  import {mapMutations} from 'vuex'

  export default {
    mixins: [playlistMixin],                        // 组件插入mixin。相当于把mixin里面的代码copy到这个组件里面。组件里面的同名的方法会覆盖mixin里面的方法
    data () {
      return {
        recommends: [],
        discList: []
      }
    },
    components: {
      'my-slider': Slider,
      'my-scroll': Scroll,
      'my-loading': Loading
    },
    created () {
      setTimeout(() => {
        // this._getRecommend()
        // this._getDiscList()                            // 模拟慢网速效果，看loading组件
      }, 1000)
      this._getRecommend()                                // 数据都是异步请求的。万一this._getRecommend()的结果比this._getDiscList()的结果慢。那么BScroll高度值的计算就会出现问题
      this._getDiscList()
      // this._getDataList()
    },
    methods: {
      _getDataList () {
        getDataList().then((res) => {                    // 语法，getRecommend(),'此处不能忘记()'.返回值是一个promise。之后用.then()获取数据
          if (res.code === ERR_OK) {
            this.recommends = res.data.slider
            this.discList = res.data.songList
          }
        })
      },
      _getRecommend () {
        getRecommend().then((res) => {                    // 语法，getRecommend(),'此处不能忘记()'.返回值是一个promise。之后用.then()获取数据
          if (res.code === ERR_OK) {
            this.recommends = res.data.slider
          }
        })
      },
      _getDiscList () {
        getDiscList().then((res) => {
          if (res.code === ERR_OK) {
            this.discList = res.data.list
          }
        })
      },
      loadImage () {
        if (!this.checkLoaded) {
          this.$refs.scroll.refresh()
          this.checkLoaded = true
        }
      },
      handlePlaylist (playList) {    // mixin必须的函数
        const bottom = playList.length > 0 ? '60px' : ''
        this.$refs.recommend.style.bottom = bottom                     // 这里是组件上的ref。所以是vue对象。需要使用.$el
        this.$refs.scroll.refresh()
      },
      selectItem (item) {                                       // 点击跳转路由，并且把数据存到vuex的state中
        this.$router.push({
          path: `/recommend/${item.dissid || item.id}`
        })
        this.setDisc(item)
      },
      ...mapMutations({
        setDisc: 'SET_DISC'
      })
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable";                  //  @import "~xxxxxx" ~去掉会报错, ;不能忘
  .recommend{
    position:fixed;
    width:100%;
    top:88px;
    bottom:0;
    .recommend-content{
      height:100%;
		  overflow:hidden;
      .slider-wrapper{
        position:relative;
        width:100%;
        overflow:hidden;
      }
      .recommend-list{
        .list-title{
          height:65px;
          line-height:65px;
          text-align:center;
          font-size:$font-size-medium;
          color:$color-theme;
        }
        .item{
          display:flex;
          box-sizing:border-box;
          align-items:center;                         // 水平居中对齐弹性盒的各项 <div> 元素：
          padding:0 20px 20px 20px;
          .icon{
          	flex:0 0 60px;
          	width:60px;
            padding-right:20px;
            img{
              vertical-align:top;
            }
          }
          .text{
            display: flex;
            flex-direction: column;                   // flex-direction 盒子竖向排列
            justify-content: center;                  // 弹性盒子居中
            flex: 1;
            line-height: 20px;
            overflow: hidden;
            font-size: $font-size-medium;
            .name{
              margin-bottom: 10px;
              color: $color-text;
            }
            .desc{
              color: $color-text-d;
            }
          }
        }
      }
      .loading-container{
        position:absolute;
        width:100%;
        top:50%;
        left:0;
        transform:translateY(-50%);
      } 
    }
  }
</style>